<template>
	<view class="tab-bar">
		<view class="" style="display: flex;background: #FFFFFF;">
			<view 
				class="common-tabbar" 
				v-for="(item,index) in tabBarList" 
				:key='index' 
				@click="handleClick(item.id)"
			>
				<image :src='item.active?item.activeImage:item.defaultImage' mode=""></image>
				<view :class="item.active?'type-choose':'no-select'">
					<view style="display: none;">{{ item.active }}</view>
				{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			storeId:{
				type:Number,
				default:0
			},
		},
		data(){
			return {
				tabBarList:[
					{
						id:0,
						name:"首页",
						defaultImage:'https://tool.tuanhaoke.cn/static/image/home/home-NoSelected.png',
						activeImage:'https://tool.tuanhaoke.cn/static/image/home/home-Selected.png',
						path:'/pages/recommend/recommend',
						url:'/pages/recommend/recommend',
						active:true,
					},
					{
						id:1,
						name:'精选好课',
						defaultImage:'https://tool.tuanhaoke.cn/static/image/recommend/NoFeatured.svg',
						activeImage:'https://tool.tuanhaoke.cn/static/image/recommend/Featured.svg',
						path:'/pages/home/home',
						url:'/pages/home/home',
						active:false,
					},
					{
						id:2,
						name:'我的',
						defaultImage:'https://tool.tuanhaoke.cn/static/image/home/my-NoSelected.png',
						activeImage:'https://tool.tuanhaoke.cn/static/image/home/my-Selected.png',
						path:'/pages/memberCenter/memberCenter',
						url:'/pages/memberCenter/memberCenter',
						active:false,
					},
				],
				tabBarIndex:0
			}
		},
		created() {
			let routes = getCurrentPages();
			let currentRoute = routes[routes.length - 1].route;
			const newTabbarList = [];
			for(let i = 0; i < this.tabBarList.length; i++){
				if('/'+currentRoute == this.tabBarList[i].path){
					newTabbarList.push({
						id:this.tabBarList[i].id,
						name:this.tabBarList[i].name,
						defaultImage:this.tabBarList[i].defaultImage,
						activeImage:this.tabBarList[i].activeImage,
						path:this.tabBarList[i].path,
						url:this.tabBarList[i].path+'?store_id='+this.storeId,
						active:true,
					})
				}else{
					newTabbarList.push({
						id:this.tabBarList[i].id,
						name:this.tabBarList[i].name,
						defaultImage:this.tabBarList[i].defaultImage,
						activeImage:this.tabBarList[i].activeImage,
						path:this.tabBarList[i].path,
						url:this.tabBarList[i].path+'?store_id='+this.storeId,
						active:false,
					})
				}
			}
			this.tabBarList = newTabbarList;
			// console.log('mounted===this.tabBarList===end',this.tabBarList);
			
		},
		methods:{
			
			handleClick(id){
				
				const newTabbarList = []
				let url = ''
				for(let i = 0; i < this.tabBarList.length; i++){
					
					if(id === this.tabBarList[i].id){
						url = this.tabBarList[i].path+'?store_id='+this.storeId;
						newTabbarList.push({
							id:this.tabBarList[i].id,
							name:this.tabBarList[i].name,
							defaultImage:this.tabBarList[i].defaultImage,
							activeImage:this.tabBarList[i].activeImage,
							path:this.tabBarList[i].path,
							url,
							active:true,
						})
					}else{
						newTabbarList.push({
							id:this.tabBarList[i].id,
							name:this.tabBarList[i].name,
							defaultImage:this.tabBarList[i].defaultImage,
							activeImage:this.tabBarList[i].activeImage,
							path:this.tabBarList[i].path,
							url:this.tabBarList[i].path+'?store_id='+this.storeId,
							active:false,
						})
					}
				}
				
				this.tabBarList = newTabbarList;
				uni.redirectTo({
					url,
					success:function(result){
						console.log('success',result);
					},
					fail:function(result){
						console.log('fail',result);
					}
				})
				
			}
		}
	}
</script>

<style>
	.tab-bar{
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 0;left: 0;
		background: #FFFFFF;
		z-index: 9999;
	}
	.common-tabbar{
		width: 50%;
		padding-bottom: 8upx;
		padding-top: 10upx;
		box-sizing: border-box;
	}
	.common-tabbar>image{
		width: 48upx;
		height: 50upx;
		margin-left: 105upx;
	}
	.common-tabbar>view{
		font-size: 22upx;
		text-align: center;
	}
	.type-choose{
		color: #FF8B46;
	}
	.no-select{
		color: #999999;
	}
</style>
